<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html version="-//W3C//DTD XHTML 1.1//EN"
      xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.w3.org/1999/xhtml
                          http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd"
>
	<head>
	
	   <!-- jquery ui -->
	    <link type="text/css" href="/code/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="/code/js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="/code/js/jquery-ui-1.8.17.custom.min.js"></script>
		
	
	    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	    <style type="text/css">@import url(/board/board.css);</style>
		
		<% var board=request.getAttribute("board");%>

		<title><%response.body+=board.title+" - "+board.category;%></title>	
		
        <script type="text/javascript" src="/code/jquery-1.7.min.js"></script>  
        <script type="text/javascript" src="/board/board.js"></script>  
        <script type="text/javascript" src="/code/jquery.preload.js"></script>

        <!-- Add fancyBox -->
        <link rel="stylesheet" href="/fancybox/jquery.fancybox.css?v=2.0.1" type="text/css" media="screen" />
        <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js?v=2.0.1"></script>
		
		
		   <!-- jquery ui -->
	    <link type="text/css" href="/code/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="/code/js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="/code/js/jquery-ui-1.8.17.custom.min.js"></script>
		
		<script type="text/javascript" src="/board/jquery.simple-color.min.js"></script>

	

	</head>

		<body>
		
		<div id="page" class="coolBorder">	
			<div id="header">
                
                <div id="Div1" class=" logo " >
                
                        Bulletin Board
                    
			    </div>
                <div id="SignOut" class="moveRight" >
                
    				<span id="WelcomeMsg">
                          Welcome back! <% response.body+= request.user.name+" | "; %>
                    </span> 

                    <a href="/home">home</a>
                    <a href="/logout">logout</a>
                    
                   
			    </div>
            </div>
				<div id="Content" >
            <div class="spanFull">
            <div id="searchDiv">
                
                    <form action="/search" id="searchForm" method="post">    
                        <div>
                            <input name="txtSearch" type="text" id="txtSearch" style="float:left;width:130px;">
                            <input type="submit" value="Search">
                        </div>
                    </form>
                
            </div>
            </div>
            
    		 <div class="middleHome" >
	    
                
                <img class="profilePic coolBorder" src="<% response.body+= request.user.picture; %>" alt="profileimg"/>	
				<span class="profileName"><% response.body+= request.user.name; %></span>
				
            <div id="homeBoards" class="coolBorder">
               
			 <div class="topBoardDiv">
			    <span class="MyTitle"><%response.body+=board.title+" - "+board.category;%></span>
				
				<div id="createnewBoardDiv">
				     <button id="createNewBoard" class="SendButton  ">create message</button>
				</div>
			 </div>
				  <ol class="dribbbles group myOl ">
					
					<%
						var msgs=request.getAttribute("msgs");
						if(msgs){
						for(var i=0;i<msgs.length;i++){
					%>
						<li id="msg<%response.body+=msgs[i].id;%>" class="group ">
                    		<div class="dribbble">
							    	    <div class="dribbble-shot" >
								   	<div class="dribbble-img msgDiv">
									  <div id="colorDiv" class="coolBorder moveRight" style="background-color:<%response.body+=msgs[i].Color;%>">
										</div>
									
										<strong><%response.body+=msgs[i].Title;%></strong>
		                                <span class="dim"><em><%response.body+=msgs[i].Creation_date.toLocaleDateString() +" created by";%></em><%response.body+=msgs[i].Username;%> </span>
                                        <br>
										<button id="<%response.body+=msgs[i].id;%>" class="deleteBtn">delete</button>
                                      
										<div id="msgtext" >
                                        <%response.body+=msgs[i].Text;%>
                                        <div>
	                               
									 </div>
									
				                </div>
							  </div>
						
						 </li>


						<%}
						}%>
					</ol>

			</div>	
				
				
				
		<div id="dialog-form" title="Create new message">
	<p class="validateTips">Insert message text.</p>

	<form>
	<fieldset>
		<label for="subject">Subject</label>
		<br>
		<input type="text" name="subject" id="subject" class="text ui-widget-content ui-corner-all" />
		<label for="color">Color</label><br>
		<input class='simple_color' value='#cc3333'/>    
	
		<label for="text">Text</label>
		<br>
        <textarea rows="5" cols="40" name="text" id="text" class="text ui-widget-content ui-corner-all" ></textarea >
           <br>
		<input type="hidden" id="boardName" name="boardName" value="<%response.body+=board.title;%>" />
        </fieldset>
	</form>
</div>  
    

            </div>
			</div>
            <div id="Footer" >
			
				<div id="copyright">
						Powered by Baruch and Shimi 2012
					
					
				</div>
			</div>
	  

		</div>
		
	
	</body>
	
	
</html>